<template>
  <div class="detail">
    <div
      class="bg"
      :style="{
        backgroundImage: 'url(' + songItem.al.picUrl + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
      }"
    ></div>
    <div class="soninfo">
      <header>
        <van-icon
          name="arrow-down"
          color="#fff"
          @click="hideDetail"
          size="25"
        />
        <div class="msg">
          <div :class="['name']">
            {{ songItem.al.name }}
            {{ songItem.alia[0] }}
          </div>
          <div class="artists">
            <span v-for="(art, index) in songItem.ar" :key="art.id" @click="tosinger(art.id)">
              {{ art.name }}
              <span
                v-if="index != songItem.ar.length - 1"
                style="padding: 0 5px"
                >/</span
              >
            </span>
          </div>
        </div>
        <van-icon name="share-o" color="#fff" size="25" />
      </header>
      <main @click="lyricToggle">
        <div v-if="!showlyric">
          <img
            src="@/assets/唱针.png"
            alt=""
            class="shot"
            :class="!isPlay ? 'stoped' : ''"
          />
          <div class="img">
            <img
              :src="songItem.al.picUrl"
              alt=""
              :class="!isPlay ? 'stoped' : ''"
            />
          </div>
        </div>
        <div v-show="showlyric" class="lyric">
          <ul ref="lyricUL">
            <li
              v-for="(item, i) in lyric"
              :key="item.id"
              :style="{
                color: lyricIndex === i ? '#9917f7' : '#ded9d9',
                fontSize: lyricIndex === i ? '20px' : '16px',
              }"
              :data-index="i"
              ref="lyric"
            >
              {{ item.lyric }}
            </li>
          </ul>
        </div>
      </main>
      <footer>
        <div class="function">
          <van-icon name="like-o" color="#fff" />
          <van-icon name="down" color="#fff" />
          <van-icon name="comment-o" color="#fff" />
          <i class="iconfont icon-icon-27"></i>
        </div>
        <div class="controls">
          <div class="scroll">
            <span class="currentTime">{{ currentTime | duetime }}</span>
            <van-slider
              v-model="value"
              active-color="#9917f7"
              @change="changesroll(value)"
            >
              <template #button>
                <div class="custom-button"></div>
              </template>
            </van-slider>
            <span class="duration">{{ duration | duetime }}</span>
          </div>
          <div class="btns">
            <i class="iconfont icon-icon-20"></i>
            <i class="iconfont icon-icon-17" @click="presong"></i>
            <van-icon
              name="play-circle-o"
              v-if="!isPlay"
              color="#fff"
              size="80"
              @click="playToggle"
            />
            <van-icon
              name="pause-circle-o"
              v-if="isPlay"
              color="#fff"
              size="80"
              @click="playToggle"
            />
            <i class="iconfont icon-icon-15" @click="nextsong"></i>
            <i class="iconfont icon-icon-1" @click="showmusicList"></i>
            <music-list
              :showmusicList="isshowmusicList"
              @hide="hidemusicList"
            ></music-list>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { getIyric } from "../api/recommend";
import musicList from "@/components/musicList.vue";
export default {
  name: "playDetail",
  components: {
    musicList,
  },
  data() {
    return {
      //   isPlay: false,
      value: 100,
      showlyric: false,
      lyric: [],
      lyricIndex: 0,
      isshowmusicList: false,
    };
  },
  props: {
    isPlay: {
      type: Boolean,
    },
    currentTime: {
      type: Number,
      default: "00:00",
    },
    duration: {
      type: Number,
      default: "00:00",
    },
  },
  methods: {
    //子传父 隐藏详情
    hideDetail() {
      this.$emit("propDetail", { showDetail: false });
    },
    //子传父 播放||停止
    playToggle() {
      if (this.isPlay) {
        this.$emit("detailsplay", { isPlay: false });
      } else {
        this.$emit("detailsplay", { isPlay: true });
      }
    },
    //歌词切换
    lyricToggle() {
      this.showlyric = !this.showlyric;
    },
    //处理接口歌词
    duelyric(arr) {
      this.lyric = [];
      // console.log(arr);
      if (arr.length == 0) {
        return;
      }
      arr.pop();
      let regExp = /\[(\d+):(\d+\.\d+)\](.*)/;
      for (let i = 0; i < arr.length; i++) {
        if (regExp.test(arr[i])) {
      console.log(RegExp.$1);
      console.log(RegExp.$2);
      console.log(RegExp.$3);
          let min = RegExp.$1;
          let sec = RegExp.$2;
          let msg = RegExp.$3;
          let obj = {
            time: Number(min) * 60 + Number(sec),
            lyric: msg,
            id: i,
          };
          this.lyric.push(obj);
        }
      }
      // console.log(this.lyric);
    },
    //对应歌词
    duelyricIndex() {
      for (let i = 0; i < this.lyric.length; i++) {
        if (this.currentTime > parseInt(this.lyric[i].time)) {
          if (this.$refs.lyric[i]) {
            this.$nextTick(function () {
              const index = this.$refs.lyric[i].dataset.index;
              if (i === parseInt(index)) {
                this.lyricIndex = i;
                this.$refs.lyricUL.style.transform = `translateY(${
                  200 - 40 * (i + 1)
                }px)`;
              }
            });
          }
        }
      }
    },
    //拖动进度条
    changesroll(val) {
      // console.log(val);
      this.$emit("sendchangesroll", val);
    },
    //显示隐藏播放歌单
    showmusicList() {
      this.isshowmusicList = !this.isshowmusicList;
    },
    hidemusicList(e) {
      this.isshowmusicList = e;
    },
    //处理上一首歌下一首歌
    ...mapMutations(["xplaysong"]),
    presong() {
      for (let i = 0; i < this.nowList.length; i++) {
        if (this.nowList[i].name == this.songItem.name) {
          if (i == 0) {
            this.xplaysong(this.nowList[this.nowList.length - 1]);
            break;
          } else {
            this.xplaysong(this.nowList[i - 1]);
            break;
          }
        }
      }
    },
    nextsong() {
      for (let i = 0; i < this.nowList.length; i++) {
        if (this.nowList[i].name == this.songItem.name) {
          if (i == this.nowList.length - 1) {
            this.xplaysong(this.nowList[0]);
            break;
          } else {
            this.xplaysong(this.nowList[i + 1]);
            break;
          }
        }
      }
    },
    //去歌手页面
    tosinger(id){
      this.$router.push({path:"/singerDetail",query:{id:id}})
      this.$emit("propDetail", { showDetail: false });
    }
  },
  computed: {
    ...mapState(["songItem"]),
    ...mapState(["nowList"]),
  },
  watch: {
    songItem: {
      handler(newName, oldName) {
        // console.log(this.songItem);
        getIyric(this.songItem.id).then((res) => {
          console.log(res);
          let arr = res.lrc.lyric.split("\n");
          console.log(arr);
          this.duelyric(arr);
        });
      },
      // 这个方法之后立即先去执行handler方法
      immediate: true,
    },
    currentTime: {
      immediate: true,
      deep: true,
      handler(newName, oldName) {
        this.duelyricIndex();
        this.value = (this.currentTime / this.duration) * 100;
        // console.log(this.value);
      },
    },
  },
  filters: {
    duetime: function (value) {
      let result = "00:00";
      if (value > 0) {
        let minute = Math.floor(value / 60);
        let second = Math.floor((value - 60 * minute) % 60);
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (result = minute + ":" + second);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    filter: blur(30px);
    //   z-index:0;
  }
  .soninfo {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.2);
  }
  header {
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 999;
    .msg {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      font-size: 18px;
      color: #fff;
      text-align: center;
      margin: 0 10px;
      .name {
        width: 100%;
        transform: translateX(0);
        animation: name linear 10s infinite;
        animation-delay: 2s;
      }
      @keyframes name {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
    }
    .artists {
      span {
        font-size: 14px;
      }
    }
  }
  main {
    .shot {
      display: block;
      width: 120px;
      margin: 0 0 0 175px;
      z-index: 2;
      transition: linear .3s;
      transform-origin: 20px 15px;
    }
    .shot.stoped {
      transform: rotate(-45deg);
    }
    .img {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("../assets/黑胶.png") no-repeat;
      background-size:400px;
      background-position: -35px -20px;;

      margin: 0 auto;
      margin-top: -80px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        animation: img 40s linear infinite;
      }
      .stoped {
        animation-play-state: paused; //暂停
      }
      @keyframes img {
        0% {
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .lyric {
      overflow: hidden;
      width: 90vw;
      height: 50vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-80%);
      ul {
        transition: linear 0.2s;
        li {
          font-size: 16px;
          color: #ddd;
          text-align: center;
          transition: linear 0.2s;
          line-height: 40px;
        }
      }
    }
  }
  footer {
    position: fixed;
    bottom: 10px;
    left: 0;
    width: 100vw;
    .function {
      text-align: center;
      margin: 30px 0;
      i {
        color: #fff;
        font-size: 30px;
        padding: 0 20px;
      }
    }
    .controls {
      .scroll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .custom-button {
          width: 15px;
          height: 15px;
          color: #fff;
          font-size: 2px;
          text-align: center;
          background-color: #fff;
          border-radius: 50%;
        }
        span {
          display: block;
          font-size: 14px;
          flex-basis: 100px;
          text-align: center;
          color: #fff;
        }
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        i {
          font-size: 40px;
          color: #fff;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
